<template>
  <view class="container">
    <view class="btns">
      <button type="primary" @click="handleUpdate">修改</button>
      <button type="warn" class="btn-delete" @click="handleDelete">删除</button>
    </view>
    <!-- <unicloud-db @load="handlerForLoadDatabase" v-slot:default="{ data, pagination, hasMore, loading, error, options }" :collection="colList" getOne> -->
    <unicloud-db @load="handlerForLoadDatabase" v-slot:default="{ data, pagination, hasMore, loading, error, options }" :collection="collectionList" getOne>
      <!-- <view v-if="loading" class="detailLoading">数据正在被加载</view> -->
      <!-- 通过下面的这个条件，让“数据没有值（数据未被读取完毕）”和“loading为true”时都显示“数据正在被加载”↓ -->
      <view v-if="loading || !data" class="detailLoading">数据正在被加载</view>
      <!-- <view v-else>{{ data }}</view>	-->
      <view v-else>
        <view class="detailHeader">
          <!-- 注：此处使用了“短路运算”来确保只有在“data.user_id”存在的情况下，才会渲染下面的内容。如果不存在“data.user_id”，则显示默认值“未知”↓ -->
          <!-- 此处用“handlerForUserClickTheAuthorInTheDetailHeader”方法来验证“data”中是否包含了“user_id”和“category_id”、“avatarfile”↓ -->
          <view class="authorInTheDetailHeader" @click="handlerForUserClickTheAuthorInTheDetailHeader(data)">
            <!-- 作者：{{ data.user_id && data.user_id[0] && data.user_id[0].nickname || '未知' }} -->
            <!-- 注：这里直接用上面的这一行代码时也会出现下面显示图片时遇到的那个“数据访问时机”问题（控制台显示原始数据“rawData[0].user_id[0].nickname”和“rawData[0].category_id[0].name”确实有值，
						但模板中直接访问data.user_id[0].nickname却得到undefined，这表明Vue的响应式系统还未完成对嵌套数组元素的代理）。解决办法：把上面的这一行被注释的代码改为下面的这一行代码（下面显示“分类名称”时也会出现这个问题）↓ -->
            作者：{{ data[0]?.user_id?.[0]?.nickname || '未知' }}
          </view>
          <!-- <view class="authorInTheDetailHeader">{{ data.user_id && data.user_id[0] && data.user_id[0].nickname || '未知'}}</view> -->
          <!-- 可选链操作符写法↓ -->
          <!-- <view class="authorInTheDetailHeader">{{ data.user_id && data?.user_id[0].nickname }}</view> -->
          <view class="categoryInTheDetailHeader">
            <!-- 分类：{{ data.category_id && data.category_id[0].name || '未知' }} -->
            分类：{{ data[0]?.category_id?.[0]?.name || '未知' }}
          </view>
        </view>
        <view class="detailBanner">
          <!-- <img class="imgInTheDetailBanner" :src="data.avatar_file.url" alt=""/> -->
          <!-- <img class="imgInTheDetailBanner" :src="data.avatar_file.image.url" alt=""/> -->
          <!-- <img class="imgInTheDetailBanner" :src="data.avatarfile.url" alt="" /> -->
          <!-- 注：上面的这一行代码↑是我按视频教程中写的代码，但是它在实际使用时，刷新页面时控制台中会报错提示“TypeError: Cannot read properties of undefined (reading 'url')”。因此我改用了下面的代码↓
					文心快码指出这是由于Vue 3的响应式系统的Proxy在数据初始化阶段造成的数据访问时机问题（这个“访问时机”具体是指“刷新页面时”，这个问题表现为“直接刷新页面时avatar_file可能还未加载完成”），并进一步解释了病因和最佳编程实践：“Vue 3使用Proxy实现响应式，有时直接访问嵌套属性会有延迟，导致在某些情况下无法正确访问嵌套属性。为了解决这个问题，可以使用可选链操作符（?）来安全地访问深层属性”↓	 -->
          <!-- 也正是因为存在这个问题↑，所以才会用到后面的“handlerForLoadDatabase”这个函数，并在其中绕过Proxy，去直接获取原始数据 -->
          <!-- <img v-if="data.avatarfile && data.avatarfile.url" class="imgInTheDetailBanner" :src="data.avatarfile && data.avatarfile.url" alt="" /> -->
          <!-- 注：如果不用“可选链运算符”，那么用短路运算来验证“avatarfile”是否存在也行↓ -->
          <img v-if="data[0]?.avatarfile?.url" class="imgInTheDetailBanner" :src="data[0].avatarfile.url" alt="" />
          <view v-else class="image-placeholder">
            图片加载中...（数据已接收但解析中）
          </view>
          <!-- 安全访问方式1：添加v-if保护 -->
          <!-- <img v-if="data.avatarfile && data.avatarfile.url" 
					class="imgInTheDetailBanner" 
					:src="data.avatarfile.url" 
					alt=""/> -->
          <!-- 安全访问方式2：添加加载状态 -->
          <!-- <view v-else class="image-placeholder">
						图片加载中...
					</view> -->
        </view>
        <view class="contantInTheDateilPage">
          <!-- <rich-text :nodes="data.content"></rich-text> -->
          <!-- 注：不知何故，此处不能直接使用“data.content”来渲染富文本内容，也要像“handlerForLoadDatabase”函数中那样通过原始数据来读取到“content”属性
					（文心快码续写代码时说因为“data”是一个Proxy对象（它是Vue 3的响应式系统的产物），而“rich-text”组件无法直接解析Proxy对象，不知道这个说法是否正确）↓ -->
          <rich-text :nodes="JSON.parse(JSON.stringify(data))[0]?.content"></rich-text>
        </view>
      </view>
    </unicloud-db>
  </view>
</template>

<script>
// 由schema2code生成，包含校验规则和enum静态数据
import { enumConverter } from '../../js_sdk/validator/food-list.js'
// const db = uniCloud.database()
const db = uniCloud.databaseForJQL()
export default {
  data() {
    return {
      queryWhere: '',
      // collectionList: [db.collection('food-list').field('category_id,title,content,avatarfile').getTemp(), db.collection('opendb-mall-categories').field('name as text, _id').getTemp()],
      // collectionList: [db.collection('food-list').where(`_id == "${this._id}"`).field('_id,title,category_id,avatarfile,status,user_id,content').getTemp()],
      // collectionList: [], // 由于会报错，所以把“collectionList”改为一个计算属性↓
      loadMore: {
        contentdown: '',
        contentrefresh: '',
        contentnomore: ''
      },
      options: {
        // 将scheme enum 属性静态数据中的value转成text
        ...enumConverter
      },
      _id: '', // 菜谱的id，用于定位要修改的菜谱
    }
  },
  computed: {
		collectionList() {
			return [db.collection('food-list').where(`_id == "${this._id}"`).field('_id,title,category_id,avatarfile,status,user_id,content').getTemp(),
				db.collection('uni-id-users').field('_id,nickname,avatar_file').getTemp(),
				db.collection('opendb-mall-categories').field('_id,parent_id,name').getTemp(),
			]
		}
	},
  /**
   * 函数“onLoad”会在页面加载时被执行，它接收一个参数“options”，这个参数包含了从上一个页面传递过来的数据。
   * @param options 它是一个配置对象，包含了被传递到当前页面的路由参数（例如“id”）
   */
  onLoad(options) {
    this._id = options.id
  },
  /* onReady() {
    if (this._id) {
      this.collectionList = [db.collection('food-list').where('_id=="' + this._id + '"').field('category_id,title,content,avatarfile').getTemp(), db.collection('opendb-mall-categories').field('name as text, _id').getTemp()]
    }
  }, */ // 这个函数仅适用于“collectionList”是“data”函数中定义的数据时，但现在“collectionList”被改为一个计算属性，所以此处把这个函数注释掉
  methods: {
    handleUpdate() {
      // 打开修改页面
      uni.navigateTo({
        url: './edit?id=' + this._id,
        events: {
          // 监听修改页面成功修改数据后, 刷新当前页面数据
          refreshData: () => {
            this.$refs.udb.loadData({
              clear: true
            })
          }
        }
      })
    },
    handleDelete() {
      this.$refs.udb.remove(this._id, {
        success: (res) => {
          // 删除数据成功后跳转到list页面
          uni.navigateTo({
            url: './list'
          })
        }
      })
    },
    /**
		 * 函数“handlerForLoadDatabase”被用于处理读取数据库时发生的事件
		 * @param dataThatBeLoaded 被加载的数据
		 */
		handlerForLoadDatabase(dataThatBeLoaded) {
			// 获取原始数据（绕过Proxy）
			const rawData = JSON.parse(JSON.stringify(dataThatBeLoaded))
			console.log('完整原始数据:', rawData)
			console.log('原始avatarfile数据:', rawData[0]?.avatarfile)
			console.log(`读取到的内容是：${rawData[0]?.content}`);
			// 更新模板引用（注：此处使用了“$nextTick”方法来确保在DOM更新完成后执行代码，这样可以避免在某些情况下出现数据还未完全加载完成，DOM还未被更新时就进行操作而导致的问题）
			this.$nextTick(() => {
				if (rawData[0]?.avatarfile?.url) {
					console.log('有效图片URL:', rawData[0].avatarfile.url)
				}
			})
		}
  }
}
</script>

<style>
.container {
  padding: 10px;
}

.btns {
  margin-top: 10px;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.btns button {
  flex: 1;
}

.btn-delete {
  margin-left: 10px;
}
.detailLoading {
	color: #999;
	text-align: center;
	margin: 30rpx 0;
	font-size: 36rpx;
}

/* .image-placeholder {
    width: 100%;
    height: 200px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
} */
 .detailHeader {
    display:flex;
	/* 注：“justify-content: space-between”表示“flex容器内的子元素沿着主轴（这里是水平方向）分布，两端对齐”↓ */
	justify-content: space-between;
	font-size: 30rpx;
	font-weight:bold;
	align-items: center;
	padding:30rpx;
}
/* .authorInTheDetailHeader, .categoryInTheDetailHeader {
    margin: 10rpx 0;
    font-size: 32rpx;
    color: #333;
} */
.detailBanner {
	width:100%;
	height:300rpx;
}
.imgInTheDetailBanner{
	width:100%;
	height:100%;
	/* “object-fit: cover”可以让图片填充整个容器，同时保持图片的宽高比不变（也就是不让图片被拉伸导致失真、变形）↓ */
	object-fit: cover;
}
.contantInTheDateilPage{padding: 30rpx;}
</style>
